<template>
    <div>
    <div class="form-row">
        <div class="form-group col-md-5">
            <label for="begin">起始日期</label>
            <input type="date" class="form-control" id="begin" placeholder="预计入住日期"
                   v-model="begin" required :min="today">
        </div>
        <div class="form-group col-md-5">
            <label for="end">结束日期</label>
            <input type="date" class="form-control" id="end" placeholder="预计入住日期"
                   v-model="end" required :min="begin">
        </div>
        <button v-on:click="queryRemainRoomTypes" class="btn col-md-2 btn-success" id="query">查询</button>
    </div>
    <div class="form-row" v-if="full">
        <div class="form-group col-md-8">
            <label for="info" class="label-danger">预定已满</label>
            <div id="info" class="form-control-plaintext text-danger">请选择其他时间段预定</div>
        </div>
    </div>
    <div class="form-row" v-else>
        <div class="form-group col-md-8">
            <label for="type">可用类型</label>
            <select name="type" class="form-control" v-model="type" id="type">
                <option disabled value="">请选择</option>
                <option v-for="roomType in roomTypes"
                        :key="roomType.id"
                        :value="roomType"
                >{{ roomType.name }}</option>
            </select>
        </div>
        <div class="form-group col-md-4">
            <label for="remain">剩余数量</label>
            <div id="remain" class="form-control-plaintext">{{ type.rooms_count }}</div>
        </div>
    </div>
        <div class="form-row" v-if="!full">
            {{ type.intro }}
        </div>
    <div class="form-row" v-if="!full">
        <form :action="purl" method="post">
            <input type="hidden" name="_token" :value="csrf">
            <input type="hidden" name="order" :value="order">
            <input type="hidden" name="begin" :value="begin">
            <input type="hidden" name="end" :value="end">
            <input type="hidden" name="type" :value="type.id">
            <input type="submit" class="btn btn-primary" value="确认">
        </form>
    </div>
    </div>
</template>

<script>
    export default {
        name: "order",
        props: ['order', 'begin', 'end', 'today', 'typeid', 'qurl', 'purl', 'csrf'],
        data: function() {
            return {
                full: true,
                type: 0,
                roomTypes: [
                    // { id: 0, name: "类型1", rooms_count: 8, intro: 'xxx' },
                ]
            }
        },
        computed: {
        },
        watch: {
        },
        methods: {
            queryRemainRoomTypes: function () {
                let req = {
                        begin: this.begin,
                        end: this.end
                };
                if(this.order != null){
                    req.order = this.order;
                }
                console.log(req);
                axios.get(this.qurl, {
                    params: req
                }).then((response) => {
                    this.roomTypes = response.data.types;
                    this.full = response.data.full;
                    console.log(response.data);
                }).catch((error) => {
                    console.log(error);
                });
            },
        },
        created: function () {
            this.queryRemainRoomTypes();
            if(this.order != null){
                this.type = this.typeid;
            }
        },
        mounted: function () {
        }
    }
</script>

<style scoped>

</style>
